@import '@/styles/common/variables.scss';

// 优惠产品
.main #detail_article #promotion.detail_discount{
  @include respond('768'){
    width: 100%;
    background-color: #fff;
    margin: 12px 0 ;
    .detail_discount_title{
      padding: 16px 0 16px 20px;
      border-bottom: 1px solid #F2F1F0;
      >.title{
        font-size: 14px;
        margin-top: 0;
        font-weight: 700;
      }
      >.secTitle{
        margin-top: 2px;
        margin-bottom: 0;
        color: #7E7E7E;
        font-size: 14px;
      }
    }

    .detail_discount_content{
      display: none;
    }
    .discount_swiper{
      display: block;
      margin-top: 16px;
      width: calc(100% - 40px);
      margin: 16px auto 0;
      .detail_discount_item {
        background-color: #fff;
        margin-right: 0;
        margin-top: 0px;
        margin-bottom: 0;
        .bottom{
          padding: 12px 0px 8px;
          .money{
            margin:8px 0 16px;
          }
        }
      }
   
      // .swiper-pagination{
      //   bottom: 17px;
      //   .swiper-pagination-bullet{
      //     background: rgba(54,52,52,0.2) ;
      //     margin: 0 6px;
      //   }
      //   .swiper-pagination-bullet-active{
      //     background: #363434 ;
      //   }
      // }
    }
    .swiper_discount_btn{
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      i{
        font-size: 16px;
        color: #363434;
        display: inline-block;
      }
      .swiper_discount_pagination {
        text-align: center;
        bottom: 0;
        .swiper-pagination-bullet{
          background-color: rgba(54, 52, 52, 0.6);
          margin-right: 10px;
          outline: none;
          &.swiper-pagination-bullet-active{
            background-color: #363434;
          }
        }
      }
    }

  }
}

// 产品
.main #recommendation_article{
  @include respond('768'){
    background-color: #ffffff;
    padding: 16px 0 0;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    &.phoneshow{
      display: block;
    }
    .productContent{
      display: none;
    }
    .swiper-container{
      padding-left: 16px;
      width: 100%;
      display: block;
    }
    .productItem {
      .title,
      .colorList,
      .specList{
        padding: 0px;
        
      }
      .specList{
        margin-top: 12px;
      }
      .comment{
        padding: 7px 0px 0;
      }
    }

  
  }

}



.main #detail_article{
  @include respond('768'){
    padding-top: $menuHeight;
    padding: 0 0px 0px;
    background-color: #F9F9F9;
    margin-bottom: 40px;
    // 标题
    .detail_comment{
      display: block;
      margin-top: 0px;
      width: 100%;
      padding:  0px;
      &.pcshow{
        display: none;
      }
      &.phoneshow{
        display: block;
      }
      .detail_title{
        padding: 16px 0 20px;
        .title{
          font-size: 18px;
          padding: 0px 20px;
        }
        .label_time_num{
          padding: 0 20px;
          height: 44px;
          .label{
            .first_type{
              display: inline-block;
            }
            span{
              display: none;
            }
          }
          .time_num{
            .time{font-size: 12px;margin-right: 8px;}
            .num {
              i{font-size: 12px;}
              span{font-size: 12px; margin-left: 4px;}
            }
          }
        }
      }
      .detail_comment_right{
        width: 100%;
        margin-right: 0;
        .user_comment{
          padding: 16px;
          .user_comment_no{
            .title{
              font-size: 16px;
              text-align: center;
            }
            .sectitle{
              text-align: center;
              font-size: 12px;
              margin: 6px 0 24px;
            }
          }
          .user_comment_btn{
            .el-button.article_btn{
              width: 100%;
            }
          }
        }
      }
      .detail_comment_left{
        background-color: #fff;
        .label_cont{
          display: none;
        }
        width: 100%;
        margin-left: 0;
        
      }
      .article_comment {
        .article_comment_item{
          padding: 0 16px;
          .article_input{
            .el-button{
              width: 100%;
            }
          }
          .article_comment_reply{
            li.article_comment_item{
              padding: 0 16px 6px;
            }
            .comment_more{
              height: 48px;
              line-height: 48px;
            }
          }

        }
        .comment_more{
          height: 48px;
          line-height: 48px;
        }
      }   
    }

    .extendData {
      height: $menuPhoneHeight;
      line-height: $menuPhoneHeight;
      top: $menuPhoneHeight;
      .article_detail{
        width: 100%;
        >p{
          font-size: 14px ;
          color: #7E7E7E;
          line-height: $menuPhoneHeight;
          margin-right: 16px;
          &.active{
            color: #363434;
          }
        }

      }
    }
    >.el-image{
      padding-bottom: 75%;
    }
    .detail_content{
      padding: 0 20px 32px;
      overflow: hidden;
      img{
        object-fit: contain;
        height: auto;
        width: 100%;
      }
    
    }
    // 优惠产品的适配
    #promotion.detail_discount{
      &.phoneshow{display: block;}
      .title{
        font-size: 18px;
      }
      .detail_discount_item{
        width: 100%;
        float: none;
        margin: 0 0 5px;
        background-color: #f9f9f9;
        margin-bottom: 0;
        .bottom{
          padding: 16px ;
          >p{
            font-size: 16px;
            font-weight: 700;
          }
        }
      }
      .secTitle{
        margin: 4px 0 16px;
      }
    }
    #youLike{
      margin-top: 12px;
      padding: 0 0;
      .you_like_title{
        padding-left: 20px;
        font-size: 14px;
        height: 54px;
        color: #000000;
        border-bottom: 1px solid #F2F1F0;
        line-height: 54px;
      }
      .youLike_content{
        display: none;
      }
      .youLike_swiper{
        display: block;
        padding-left: 16px;
        .you_like_item{
          margin: 24px 0;
          .el-image{
            width: 120px;
            height: 90px;
            margin-left: 0;
          }
          >div{
            width: calc(100% - 136px);
            margin-left: 16px;
          }
        }
      }
    }
  
    &.scroll{
      .extendData {
        display: block;
      }
    }
    #recommendation_article,
    .detail_discount{
      -webkit-transform: translateY(150px);
      -moz-transform: translateY(150px);
      -ms-transform: translateY(150px);
      -o-transform: translateY(150px);
      transform: translateY(150px);
      -webkit-transition: -webkit-transform ease 0.8s;
      transition: -webkit-transform ease 0.8s;
      -o-transition: -o-transform ease 0.8s;
      -moz-transition: transform ease 0.8s,-moz-transform ease 0.8s;
      transition: transform ease 0.8s;
      transition: transform ease 0.8s,-webkit-transform ease 0.8s,-moz-transform ease 0.8s,-o-transform ease 0.8s;
      transition: transform ease 0.8s,-webkit-transform ease 0.8s;
      opacity: 0.7;
      &.visible{
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
        

      }
    }
  }
}

.main #detail_article {
  .warranty_dialog.login_diaplog{
    @include respond('768'){
      .el-dialog{
        left: 0 ;
        width: 100%;
        margin: 0 20px;
        .el-dialog__body {
          .el-form {
            .title{
              font-size: 18px;
            }
          }
        } 
      }

    }
  }
}

.shareModule{
  @include respond('768'){
    .icon-Top{
      .svgNormal{opacity: 0;}
      .svgHover{opacity: 1;}

    }
  }
}

.main #detail_article {
  .warranty_dialog.share_dialog{
    @include respond('768'){
      .el-dialog{
        left: 0 ;
        width: 100%;
        margin: 0 20px;
        padding: 16px 0 32px;
      }
      .el-dialog__header{text-align: center;margin-bottom: 8px;}
      .el-dialog__body{
        display: block;
        padding: 0;
        .svgNormal{
          opacity: 0;
        }
        .share_div{
          margin-right: 0;
          min-width: 72px;
          margin-top: 24px;
          margin-left: 64px;
          p{color: #363434;}
        }
        .svgHover{
          opacity: 1;
        }
      }

    }
  }
}
